// 设置面板组件

import React from 'react';
import { useHmiState } from '../hooks/useHmiState';
import {
  Volume2,
  Sun,
  Globe,
  Wifi,
  Bluetooth,
  Map,
  Shield,
  User,
  Settings as SettingsIcon
} from 'lucide-react';

const SettingsPanel: React.FC = () => {
  const { controlSettings, updateControlSettings, userRole, switchUserRole } = useHmiState();

  const handleVolumeChange = (value: number) => {
    updateControlSettings({ volume: value });
  };

  const handleBrightnessChange = (value: number) => {
    updateControlSettings({ brightness: value });
  };

  return (
    <div className="control-panel">
      <div className="flex items-center gap-2 mb-6">
        <SettingsIcon size={20} className="text-primary-400" />
        <h3 className="text-lg font-semibold text-white">系统设置</h3>
      </div>

      {/* 系统配置 - 仅安全员可见 */}
      {userRole.type === 'safety_officer' && (
        <div className="mb-6">
          <h4 className="text-sm font-medium text-gray-300 mb-3">系统配置</h4>
          
          {/* 地图选择 */}
          <div className="mb-4">
            <label className="block text-sm text-gray-400 mb-2">地图选择</label>
            <select className="w-full p-2 bg-gray-700 border border-gray-600 rounded-lg text-white focus:outline-none focus:border-primary-500">
              <option value="tencent">软通动力地图</option>
              <option value="baidu">百度地图</option>
              <option value="amap">高德地图</option>
            </select>
          </div>

          {/* 线路选择 */}
          <div className="mb-4">
            <label className="block text-sm text-gray-400 mb-2">运营线路</label>
            <select className="w-full p-2 bg-gray-700 border border-gray-600 rounded-lg text-white focus:outline-none focus:border-primary-500">
              <option value="metro-penguin">地铁站-企鹅岛</option>
              <option value="penguin-campus">企鹅岛园区</option>
              <option value="coastal-tencent">滨海大厦-软通动力大厦</option>
              <option value="custom">自定义线路</option>
            </select>
          </div>

          {/* 模型选择 */}
          <div className="grid grid-cols-1 gap-3">
            <div>
              <label className="block text-sm text-gray-400 mb-2">定位模型</label>
              <select className="w-full p-2 bg-gray-700 border border-gray-600 rounded-lg text-white focus:outline-none focus:border-primary-500">
                <option value="gps-imu">GPS+IMU融合</option>
                <option value="rtk-gps">RTK-GPS高精度</option>
                <option value="visual-slam">视觉SLAM</option>
              </select>
            </div>
            <div>
              <label className="block text-sm text-gray-400 mb-2">感知模型</label>
              <select className="w-full p-2 bg-gray-700 border border-gray-600 rounded-lg text-white focus:outline-none focus:border-primary-500">
                <option value="yolo-v8">YOLO v8</option>
                <option value="detectron2">Detectron2</option>
                <option value="pointpillars">PointPillars</option>
              </select>
            </div>
            <div>
              <label className="block text-sm text-gray-400 mb-2">规划模型</label>
              <select className="w-full p-2 bg-gray-700 border border-gray-600 rounded-lg text-white focus:outline-none focus:border-primary-500">
                <option value="hybrid-astar">Hybrid A*</option>
                <option value="rrt-star">RRT*</option>
                <option value="lattice-planner">Lattice Planner</option>
              </select>
            </div>
          </div>
        </div>
      )}

      {/* 用户角色切换 */}
      <div className="mb-6">
        <h4 className="text-sm font-medium text-gray-300 mb-3">用户角色</h4>
        <div className="grid grid-cols-2 gap-3">
          <button
            onClick={() => switchUserRole({ type: 'passenger', name: '乘客', permissions: ['view_status', 'emergency_call', 'emergency_stop'] })}
            className={`hmi-button ${
              userRole.type === 'passenger' ? 'bg-primary-600' : 'bg-gray-700 hover:bg-gray-600'
            }`}
          >
            <User size={16} className="mr-2" />
            乘客
          </button>
          <button
            onClick={() => switchUserRole({ type: 'safety_officer', name: '安全员', permissions: ['view_status', 'emergency_call', 'emergency_stop', 'system_control', 'recording'] })}
            className={`hmi-button ${
              userRole.type === 'safety_officer' ? 'bg-primary-600' : 'bg-gray-700 hover:bg-gray-600'
            }`}
          >
            <Shield size={16} className="mr-2" />
            安全员
          </button>
        </div>
      </div>

      {/* 显示设置 */}
      <div className="mb-6">
        <h4 className="text-sm font-medium text-gray-300 mb-3">显示设置</h4>
        <div className="space-y-4">
          <div>
            <div className="flex items-center justify-between mb-2">
              <div className="flex items-center gap-2">
                <Sun size={16} className="text-gray-400" />
                <span className="text-sm text-gray-300">屏幕亮度</span>
              </div>
              <span className="text-sm text-gray-400">{controlSettings.brightness}%</span>
            </div>
            <input
              type="range"
              min="0"
              max="100"
              value={controlSettings.brightness}
              onChange={(e) => handleBrightnessChange(Number(e.target.value))}
              className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer slider"
            />
          </div>

          <div>
            <div className="flex items-center justify-between mb-2">
              <div className="flex items-center gap-2">
                <Volume2 size={16} className="text-gray-400" />
                <span className="text-sm text-gray-300">音量</span>
              </div>
              <span className="text-sm text-gray-400">{controlSettings.volume}%</span>
            </div>
            <input
              type="range"
              min="0"
              max="100"
              value={controlSettings.volume}
              onChange={(e) => handleVolumeChange(Number(e.target.value))}
              className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer slider"
            />
          </div>

          <div className="flex items-center justify-between">
            <div className="flex items-center gap-2">
              <Globe size={16} className="text-gray-400" />
              <span className="text-sm text-gray-300">语言</span>
            </div>
            <select
              value={controlSettings.language}
              onChange={(e) => updateControlSettings({ language: e.target.value as 'zh' | 'en' })}
              className="bg-gray-700 text-white rounded px-3 py-1 text-sm border border-gray-600"
            >
              <option value="zh">中文</option>
              <option value="en">English</option>
            </select>
          </div>

          <div>
            <div className="flex items-center justify-between mb-2">
              <div className="flex items-center gap-2">
                <SettingsIcon size={16} className="text-gray-400" />
                <span className="text-sm text-gray-300">字体大小</span>
              </div>
              <span className="text-sm text-gray-400">{controlSettings.fontSize || '中等'}</span>
            </div>
            <select
              value={controlSettings.fontSize || 'medium'}
              onChange={(e) => updateControlSettings({ fontSize: e.target.value as 'small' | 'medium' | 'large' | 'xlarge' })}
              className="w-full p-2 bg-gray-700 border border-gray-600 rounded-lg text-white focus:outline-none focus:border-primary-500"
            >
              <option value="small">小</option>
              <option value="medium">中等</option>
              <option value="large">大</option>
              <option value="xlarge">特大</option>
            </select>
          </div>
        </div>
      </div>

      {/* 连接设置 */}
      <div className="mb-6">
        <h4 className="text-sm font-medium text-gray-300 mb-3">连接设置</h4>
        <div className="space-y-3">
          <div className="flex items-center justify-between p-3 bg-gray-800/50 rounded-lg">
            <div className="flex items-center gap-2">
              <Wifi size={16} className="text-success-400" />
              <span className="text-sm text-gray-300">Wi-Fi</span>
            </div>
            <div className="text-sm text-success-400">已连接</div>
          </div>

          <div className="flex items-center justify-between p-3 bg-gray-800/50 rounded-lg">
            <div className="flex items-center gap-2">
              <Bluetooth size={16} className="text-success-400" />
              <span className="text-sm text-gray-300">蓝牙</span>
            </div>
            <div className="text-sm text-success-400">已连接</div>
          </div>

          <div className="flex items-center justify-between p-3 bg-gray-800/50 rounded-lg">
            <div className="flex items-center gap-2">
              <Map size={16} className="text-success-400" />
              <span className="text-sm text-gray-300">GPS</span>
            </div>
            <div className="text-sm text-success-400">已定位</div>
          </div>
        </div>
      </div>

      {/* 系统信息 */}
      <div className="border-t border-gray-700 pt-4">
        <h4 className="text-sm font-medium text-gray-300 mb-3">系统信息</h4>
        <div className="space-y-2 text-sm">
          <div className="flex justify-between">
            <span className="text-gray-400">软件版本：</span>
            <span className="text-white">v2.1.0</span>
          </div>
          <div className="flex justify-between">
            <span className="text-gray-400">硬件版本：</span>
            <span className="text-white">HMI-2025-A</span>
          </div>
          <div className="flex justify-between">
            <span className="text-gray-400">最后更新：</span>
            <span className="text-white">2025-01-08</span>
          </div>
        </div>
      </div>
    </div>
  );
};

export default SettingsPanel;
